<template>
  <div style="margin:0 auto">
    <LinkButton :plain=true
                iconCls="glyphicon-plus icon-green"
                @click="openAddDiaolog">添加</LinkButton>
    <TreeGrid :data="treeGrid"
              idField="id"
              parentField="pid"
              treeField="text"
              :virtualScroll="true"
              style="height:calc(100vh - 111px)"
              frozenWidth="40px"
              :border="false"
              :loading="loading">
      <GridColumn field="id"
                  title="编号"
                  :frozen="true"></GridColumn>
      <GridColumn field="text"
                  title="资源名称"
                  width=140
                  :expander="true"></GridColumn>
      <GridColumn field="attributes"
                  title="资源路径"
                  width=200></GridColumn>
      <GridColumn field="openMode"
                  title="打开方式"
                  width=60></GridColumn>
      <GridColumn field="state"
                  title="菜单状态"
                  width=60>
        <template slot="cell"
                  slot-scope="{row}">
          {{row.state==='open'?'打开':'关闭'}}
        </template>
      </GridColumn>
      <GridColumn field="seq"
                  title="排序"
                  width=40></GridColumn>
      <GridColumn field="iconCls"
                  title="图标"
                  width=120></GridColumn>
      <GridColumn field="resourceType"
                  title="资源类型"
                  width=80>
        <template slot="cell"
                  slot-scope="{row}">
          {{row.resourceType===0?'菜单':'按钮'}}
        </template>
      </GridColumn>
      <GridColumn field="status"
                  title="状态"
                  width=40>
        <template slot="cell"
                  slot-scope="{row}">
          {{row.status===0?'正常':'停用'}}
        </template></GridColumn>
      <GridColumn field="action"
                  title="操作"
                  width=130>
        <template slot="cell">
          <LinkButton :plain=true
                      iconCls="glyphicon-pencil icon-blue">编辑</LinkButton>
          |
          <LinkButton :plain=true
                      iconCls="glyphicon-trash icon-red">删除</LinkButton>
        </template>
      </GridColumn>
    </TreeGrid>

    <Dialog ref="d1"
            v-if="addModal"
            :title="'Draggable And Resizable'"
            :dialogStyle="{width:'400px',height:'200px'}"
            :draggable="true"
            :resizable="true">
      <p style="text-align:center;margin:50px 0;font-size:16px">The Dialog Content.</p>
    </Dialog>
  </div>
</template>
<script>
import { getTreeGrid } from '_api/resource'
export default {
  data () {
    return {
      loading: true,
      treeGrid: [],
      addModal: false
    }
  },
  created () {
    getTreeGrid().then(res => {
      this.treeGrid = res
      this.loading = false
    })
  },
  methods: {
    openAddDiaolog () {
      if (!this.addModal) {
        this.addModal = true
      } else {
        this.$refs.d1.open()
      }
    }
  }
}
</script>
